@import "../size/index";
@import '../../config/config.less';

//namespace
@css-prefix-btn: ~"@{css-prefix}btn";

//  button size
.button-size(@padding; @font-size; @border-radius) {
  padding: @padding;
  font-size: @font-size;
  border-radius: @border-radius;
}
//  button color
.button-color(@color; @background; @border) {
  color: @color;
  background-color: @background;
  border-color: @border;
  // a inside Button which only work in Chrome
  // http://stackoverflow.com/a/17253457
  > a:only-child {
    color: currentColor;
    &:after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      background: transparent;
    }
  }
}
// Color
// for tabindex
.active-btn-color(@color) {
  &:focus {
    box-shadow: 0 0 0 2px fade(@color, 20%);
  }
}

//  button variant
.button-variant(@color; @background; @border) {
  .button-color(@color; @background; @border);

  // hover
  &:hover
    //&:focus
  {
    .button-color(tint(@color, 20%); tint(@background, 20%); tint(@border, 20%));
  }

  //  active
  &:active,
  &.active {
    .button-color(shade(@color, 5%); shade(@background, 5%); shade(@background, 5%));
  }

  // disabled
  &.disabled,
  &[disabled],
  // fieldset  disabled
  fieldset[disabled] & {
    &,
    &:hover,
    &:focus,
    &:active,
    &.active {
      .button-color(@btn-disable-color; @btn-disable-bg; @btn-disable-border);
    }
  }
}



.btn() {
  display: inline-block;
  margin-bottom: 0;
  font-weight: @btn-font-weight;
  text-align: center;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  white-space: nowrap;
  line-height: @line-height-base;
  user-select: none;
  .button-size(@btn-padding-base; @btn-font-size; @btn-border-radius);
  //transform: translate3d(0, 0, 0);
  //transition: all @transition-time linear;
  transition: color @transition-time linear, background-color @transition-time linear, border @transition-time linear, box-shadow @transition-time linear;

  > .@{css-prefix-iconfont} {
    line-height: 1;
  }

  &,
  &:active,
  &:focus {
    outline: 0;
  }

  &:not([disabled]):hover {
    text-decoration: none;
  }

  &:not([disabled]):active {
    outline: 0;
    // transition: none;  // 如果不注释此行，那么active会和focus同时触发，此时focus的开始动画transition会无效
  }

  &.disabled,
  &[disabled] {
    cursor: @cursor-disabled;
    > * {
      pointer-events: none;
    }
  }
}

// Default
.btn-default() {
  .button-variant(@btn-default-color; @btn-default-bg; @btn-default-border);

  &:hover
    //&:focus
  {
    .button-color(tint(@primary-color, 20%); @btn-default-hover-bg; tint(@primary-color, 20%));
  }
  &:active,
  &.active {
    .button-color(shade(@primary-color, 5%); @btn-default-active-bg; shade(@primary-color, 5%));
  }
  .active-btn-color(@primary-color);
}

// Primary
.btn-primary() {
  .button-variant(@btn-primary-color; @btn-primary-bg; @primary-color);

  &:hover{
    .button-color(@btn-primary-color; fade(@btn-primary-bg, 80%);  @btn-primary-hover-boder);
  }
    //&:focus,
  &:active,
  &.active {
    color: @btn-primary-color;
    .button-color(@btn-primary-color; fade(@btn-primary-active-bg, 80%);  @btn-primary-active-boder);
  }
  .active-btn-color(@primary-color);
}

// Ghost
.btn-ghost() {
  .button-variant(@btn-ghost-color, @btn-ghost-bg, @btn-ghost-border);

  &:hover
    //&:focus
  {
    .button-color(tint(@primary-color, 20%); @btn-ghost-hover-bg; tint(@primary-color, 20%));
  }
  &:active,
  &.active {
    .button-color(shade(@primary-color, 5%); @btn-ghost-active-bg; shade(@primary-color, 5%));
  }
  .active-btn-color(@primary-color);
}

// Dashed
.btn-dashed() {
  .button-variant(@btn-ghost-color, @btn-ghost-bg, @btn-ghost-border);
  border-style: dashed;

  &:hover
    //&:focus
  {
    .button-color(tint(@primary-color, 20%); @btn-ghost-bg; tint(@primary-color, 20%));
  }
  &:active,
  &.active {
    .button-color(shade(@primary-color, 5%); @btn-ghost-bg; shade(@primary-color, 5%));
  }
  .active-btn-color(@primary-color);
}
// Cancel
.btn-cancel(){
    .button-variant(@btn-cancel-color; @btn-cancel-bg; @btn-cancel-border);

    &:hover
      //&:focus
    {
      .button-color(tint(@btn-cancel-color, 20%); @btn-cancel-hover-bg; @btn-cancel-hover-bg);
    }
    &:active,
    &.active {
      .button-color(shade(@btn-cancel-color, 5%); @btn-cancel-active-bg; @btn-cancel-active-bg);
    }
    .active-btn-color(@primary-color);
}
// Text
.btn-text() {
  .button-variant(@btn-ghost-color, @btn-ghost-bg, transparent);

  // for disabled
  &.disabled,
  &[disabled],
  fieldset[disabled] & {
    &,
    &:hover,
    &:focus,
    &:active,
    &.active {
      .button-color(@btn-disable-color; @btn-ghost-bg; transparent);
    }
  }

  &:hover
    //&:focus
  {
    .button-color(tint(@primary-color, 20%); @btn-ghost-bg; transparent);
  }
  &:active,
  &.active {
    .button-color(shade(@primary-color, 5%); @btn-ghost-bg; transparent);
  }
  .active-btn-color(@primary-color);
}


.btn-color(@color) {
  .button-variant(@btn-primary-color; @color; @color);

  &:hover,
    //&:focus,
  &:active,
  &.active {
    color: @btn-primary-color;
  }

  .active-btn-color(@color);
}

// Circle for Icon
.btn-circle(@btnClassName: @css-prefix-btn) {
  border-radius: @btn-circle-size;

  &.@{btnClassName}-size{
    border-radius: @btn-circle-size-small;
  }

  &.@{btnClassName}-icon-only{
    .square(@btn-circle-size);
    .button-size(0; @font-size-base + 2; 50%);
    >span {
      display: none;
      font: 0/0 SimSun;
      text-indent: -9999em;
    }
  }
}

